<template>
  <div class="app-container fix-padding-bottom">
    <div class="bill-payment">
      <el-row>
        <el-col :span="4">
          <div class="sidebar-t">
            统计报表
          </div>
          <Sidebar class="sidebar-container" />
        </el-col>
        <el-col
          :span="20"
          class="r-cont"
        >
          <div class="m-title">
            <i
              class="el-icon-arrow-left back-report-view"
              @click="backReportView"
            />
            案件回款情况统计表
          </div>
          <div class="r-top">
            <span class="l">
              图形详情
            </span>
            <span class="r">
              <em>组织：{{ org||'---' }}</em>
              <em>报表日期：{{ genDate||'---' }}</em>
              <em>周期：{{ period||'---' }}</em>
            </span>
          </div>
          <el-row
            :class="{'chart': true, 'nodata': isNoData}"
            :gutter="0"
          >
            <el-col :span="6">
              <div :class="{'area': true, 'sum': isSum0}">
                <em v-model="returnMoneyNum">{{ returnMoneyNum||0 }}%</em>
                <PieChart
                  :parent-object="returnedMoneyRate"
                  width="220px"
                  height="193px"
                  class="sum-case"
                />
                <em
                  v-model="returnCountNum"
                  class="sec"
                >{{ returnCountNum||0 }}%</em>
                <PieChart
                  :parent-object="returnedCountRate"
                  width="220px"
                  height="193px"
                  class="major-case"
                />
              </div>
            </el-col>
            <el-col :span="18">
              <div :class="{'area': true, 'major': isMajor0}">
                <i>本月案件回款金额/数量统计表</i>
                <LineChart
                  :chart-data="lineData"
                  class="line-payment"
                  width="700px"
                  height="340px"
                />
              </div>
            </el-col>
          </el-row>
          <!-- <div class="title">未触达占比</div> -->
          <el-row
            v-show="false"
            class="unreach-percent"
          >
            <el-col :span="12">
              <div class="per">
                已分配3天案件未触达占比 {{ typeof UnCoverRate3==='number'&&UnCoverRate3+'%'||'---' }}
              </div>
            </el-col>
            <el-col :span="12">
              <div class="per">
                已分配7天案件未触达占比 {{ typeof UnCoverRate7==='number'&&UnCoverRate7+'%'||'---' }}
              </div>
            </el-col>
          </el-row>
          <div class="title">
            表格详情
            <el-button
              v-waves
              class="filter-item download"
              type="primary"
              :loading="downloadLoading"
              @click="downloadExcel"
            >
              下载报表
            </el-button>
          </div>
          <el-table
            ref="singleTable"
            v-loading.body="listLoading"
            class="table-detail"
            stripe
            center
            element-loading-text="Loading"
            border
            fit
            highlight-current-row
            :newpoly="isWin32"
            height="300"
            :data="tableData"
            @current-change="handleCurrentChange"
          >
            <el-table-column
              width="130"
              :label="roleModel"
            >
              <template slot-scope="scope">
                {{ scope.row.unitName || '---' }}
              </template>
            </el-table-column>
            <el-table-column
              width="200"
              label="组织"
            >
              <template slot-scope="scope">
                <!--
			              {{scope.row.deptName||'---'}}/{{scope.row.teamName||'---' }}
				        	 -->
                {{ scope.row.aggrName||'---' }}
              </template>
            </el-table-column>
            <el-table-column
              width="110"
              prop="currentAssignCount"
              label="分配案件数量"
            />
            <el-table-column
              width="120"
              prop="currentAuthorizeMoney"
              label="委案金额"
            />
            <el-table-column
              width="120"
              label="本月回款案件数"
            >
              <template slot-scope="scope">
                {{ scope.row.monthReturnedCount }}
              </template>
            </el-table-column>
            <el-table-column
              width="120"
              label="本月回款金额"
            >
              <template slot-scope="scope">
                {{ scope.row.monthReturnedMoney }}
              </template>
            </el-table-column>
            <el-table-column
              width="120"
              label="回款案件总数"
            >
              <template slot-scope="scope">
                {{ scope.row.currentReturnedCount }}
              </template>
            </el-table-column>
            <el-table-column
              width="120"
              label="回款案件总金额"
            >
              <template slot-scope="scope">
                {{ scope.row.currentReturnedMoney }}
              </template>
            </el-table-column>
            <el-table-column
              width="150"
              label="本月案件数量回收率"
            >
              <template slot-scope="scope">
                {{ scope.row.monthReturnedCountRate?scope.row.monthReturnedCountRate+'%':'---' }}
              </template>
            </el-table-column>
            <el-table-column
              width="150"
              label="本月案件金额回收率"
            >
              <template slot-scope="scope">
                {{ scope.row.monthReturnedMoneyRate?scope.row.monthReturnedMoneyRate+'%':'---' }}
              </template>
            </el-table-column>
          </el-table>
          <!-- <div class="bottom-mask"></div> -->
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script type="text/javascript">

import { Sidebar } from '@/views/layout/components'
import { parseTime } from '@/utils'
import waves from '@/directive/waves'
import { route_origins } from '@/api/routes'
import { /* reportViewStatCase, */ reportBillExport } from '@/api/statReport'
import { reportViewBillQuery } from '@/api/bill'
import PieChart from './components/PieChart'
import LineChart from './components/LineChart'
import { getExcelHeaderArray } from '@/vendor/ReadExcel'

const Export2Excel = import('@/vendor/Export2Excel')

export default {
  name: 'BillPayment',
  directives: {
    waves
  },
  components: {
    Sidebar,
    PieChart,
    LineChart
  },
  filters: {
    filterYMD(date) {
      return date ? parseTime(date, '{y}-{m}-{d}') : ''
    },
    filterYMDHMS(date) {
      return date ? parseTime(date) : ''
    }
  },
  data() {
    return {
      org: '',
      genDate: '',
      period: '日',
      isNoData: false,
      isSum0: false,
      isMajor0: false,
      sumCaseTitle: '案件金额回收率',
      returnMoneyNum: '',
      returnCountNum: '',
      returnedMoneyRate: {
        backgroundColor: '#ffffff',
        title: {
          text: this.sumCaseTitle,
          left: 58,
          top: 98,
          textStyle: {
            fontSize: 13,
            fontWeight: 'bolder',
            color: '#78B7E7'
          }
          // subtext: 'test',
        },
        tooltip: {
          trigger: 'item',
          'formatter': obj => {
            return `${this.returnMoneyNum || 0}%`
          }
        },
        legend: {
          show: false,
          orient: 'vertical',
          right: 20,
          top: 60,
          bottom: 10,
          data: [],
          textStyle: {
            color: '#5B5D5F',
            fontSize: 11
          }
        },
        // calculable: true,
        series: [{
          name: '案件金额回收率',
          type: 'pie',
          clockwise: false,
          hoverAnimation: false,
          roseType: 'radius',
          radius: ['69%', '70%'],
          center: ['50%', '50%'],
          label: {
            'normal': {
              'show': true,
              // 'formatter': '{d}%',
              'formatter': obj => {
                // console.log('oooobbbbjjj -money:', obj.percent, this.returnMoneyNum)
                // return obj.percent + '%'
                return `${this.returnMoneyNum || 0}%`
              },
              'textStyle': {
                'fontSize': 30,
                'fontWeight': 'bold'
                // color: '#78B7E7'
              },
              'position': 'center'
            }
          },
          'labelLine': {
            'show': false
          },
          itemStyle: {
            'normal': {
              'color': '#78B7E7',
              'borderColor': {
                type: 'linear',
                colorStops: [{
                  offset: 0,
                  color: 'rgba(135,203,255,1)'
                }, {
                  offset: 1,
                  color: 'rgba(154,135,255,1)'
                }],
                globalCoord: false
              },
              'borderWidth': 12
            }
          },
          data: [],
          animationEasing: 'cubicInOut',
          animationDuration: 2600
        }, {
          'name': '金额外圈',
          'center': [
            '50%',
            '50%'
          ],
          'radius': [
            '74%',
            '75%'
          ],
          tooltip: {
            show: false
          },
          'labelLine': {
            'show': false
          },
          'clockWise': false,
          'hoverAnimation': false,
          'type': 'pie',
          'data': [{
            'value': 100,
            'name': '',
            'itemStyle': {
              'normal': {
                'color': '#5886f0',
                'borderColor': {
                  type: 'linear',
                  colorStops: [{
                    offset: 0,
                    color: 'rgba(135,203,255,1)'
                  }, {
                    offset: 1,
                    color: 'rgba(154,135,255,1)'
                  }],
                  globalCoord: false
                },
                'borderWidth': 2
              }
            }
          }]
        }, {
          'name': '边框',
          'center': ['50%', '50%'],
          'radius': ['85%', '85%'],
          tooltip: {
            show: false
          },
          'clockWise': false,
          'hoverAnimation': false,
          'type': 'pie',
          'itemStyle': {
            'normal': {
              'color': 'rgba(0,0,0,0)',
              'borderColor': '#E2E6E7',
              'borderWidth': 1
            },
            'emphasis': {
              'color': 'rgba(0,0,0,0)',
              'borderColor': '#E2E6E7',
              'borderWidth': 1
            }
          },
          'data': [{
            'value': 100,
            'name': ''
          }]
        }],
        color: ['#87C9FF', '#879DFF', '#9A87FF', '#CD99FF', '#D477C0', '#B15E97', '#B15E77', '#994949', '#546570', '#DAC53E', '#B9DA3E']
      },
      /**
			 * [majorCaseTitle 案件数量回收率]
			 * @type {String}
			 */
      majorCaseTitle: '案件数量回收率',
      returnedCountRate: {
        backgroundColor: '#ffffff',
        title: {
          text: this.majorCaseTitle,
          left: 58,
          top: 98,
          // bottom: 50,
          textStyle: {
            fontSize: 13,
            fontWeight: 'bolder',
            color: '#BF67AC'
          }
        },
        tooltip: {
          trigger: 'item',
          'formatter': obj => {
            return `${this.returnCountNum || 0}%`
          }
        },
        legend: {
          show: false,
          orient: 'vertical',
          right: 20,
          top: 60,
          bottom: 10,
          data: [],
          textStyle: {
            color: '#5B5D5F',
            fontSize: 11
          }
        },
        calculable: true,
        series: [{
          name: '案件数量回收率',
          type: 'pie',
          clockwise: false,
          hoverAnimation: false,
          roseType: 'radius',
          radius: ['69%', '70%'],
          center: ['50%', '50%'],
          'label': {
            'normal': {
              'show': true,
              'formatter': obj => {
                return `${this.returnCountNum || 0}%`
              },
              'textStyle': {
                'fontSize': 30,
                'fontWeight': 'bold'
              },
              'position': 'center'
            }
          },
          'labelLine': {
            'show': false
          },
          itemStyle: {
            'normal': {
              'color': '#BF67AC',
              'borderColor': {
                type: 'linear',
                colorStops: [{
                  offset: 0,
                  color: '#e169c3'
                }, {
                  offset: 1,
                  color: '#bc5676'
                }],
                globalCoord: false
              },
              'borderWidth': 12
            }
          },
          data: [],
          animationEasing: 'cubicInOut',
          animationDuration: 2600
        }, {
          'name': '金额外圈',
          'center': [
            '50%',
            '50%'
          ],
          'radius': [
            '74%',
            '75%'
          ],
          tooltip: {
            show: false
          },
          'labelLine': {
            'show': false
          },
          'clockWise': false,
          'hoverAnimation': false,
          'type': 'pie',
          'data': [{
            'value': 100,
            'name': '',
            'itemStyle': {
              'normal': {
                'color': '#5886f0',
                'borderColor': {
                  type: 'linear',
                  colorStops: [{
                    offset: 0,
                    color: '#e169c3'
                  }, {
                    offset: 1,
                    color: '#bc5676'
                  }],
                  globalCoord: false
                },
                'borderWidth': 2
              }
            }
          }]
        }, {
          'name': '边框',
          'center': ['50%', '50%'],
          'radius': ['85%', '85%'],
          tooltip: {
            show: false
          },
          'clockWise': false,
          'hoverAnimation': false,
          'type': 'pie',
          'data': [{
            'value': 100,
            'name': '',
            'labelLine': {
              'show': false
            },
            'itemStyle': {
              'normal': {
                'color': 'rgba(0,0,0,0)',
                'borderColor': '#E2E6E7',
                'borderWidth': 1
              },
              'emphasis': {
                'color': 'rgba(0,0,0,0)',
                'borderColor': '#E2E6E7',
                'borderWidth': 1
              }
            }
          }]
        }],
        color: ['#8C5CFF', '#D54EE5', '#EC6170', '#43C591', '#9ED071', '#556DD4', '#3CB8FF', '#FBD769', '#F3B041', '#812DC9', '#230041']
      },
      lineData: {
        // date: ['4月6日', '4月7日', '4月8日', '4月9日', '4月10日', '4月11日', '4月12日'],
        date: [],
        returnedCount: [],
        returnedMoney: []
        // returnedCount: [100, 120, 161, 134, 15, 160, 165].map((m, i) => {
        // 	return Math.random() * 100 | 0
        // }),
        // returnedMoney: [120, 22, 91, 154, 162, 140, 145].map((m, i) => {
        // 	return Math.random() * 100 | 0
        // })
      },
      lengendArr: [],
      UnCoverRate3: '',
      UnCoverRate7: '',
      reportId: localStorage.skyTrace && JSON.parse(localStorage.skyTrace).homeReportId || '',
      // reportId: 4566,
      // [4551, 4556, 4561, 4566][(Math.random() * 4) >> 0],
      listLoading: false,
      tableData: [],
      isDownload: false,
      totalRow: '',
      currentRow: '',
      commonCaseTotalStream: '',
      importantCaseTotalStream: '',
      lineCaseTotalStream: '',
      downloadLoading: false,
      filename: '案件覆盖率情况统计表',
      autoWidth: true,
      isWin32: false,
      roleModel: ''
    }
  },
  computed: {
  },
  mounted() {
    console.log(arguments)
    this.getReportViewSataCase()
    this.isWin32 = window.navigator.platform.toLowerCase() === 'win32'
    this.roleModel = ['操作员', '小组', '部门'][localStorage.skyTrace && JSON.parse(localStorage.skyTrace).scope || 0]
  },
  methods: {
    backReportView() {
      this.$router.push({
        path: '/statReport/reportView'
      })
    },
    getReportViewSataCase() {
      console.log('this.reportId:', this)
      reportViewBillQuery({
        reportId: this.reportId
      }).then(response => {
        console.log('getReportViewSataCase:', response, arguments)
        if (!response) {
          return
        }
        this.tableData = response
        this.currentRow = this.totalRow = response[response.length - 1]
        // this.org = `${this.totalRow.deptName || '---'}/${this.totalRow.teamName || '---'}`
        this.org = this.totalRow.aggrName || '---'
        this.genDate = this.totalRow.statisticDate || '---'
        this.UnCoverRate3 = this.totalRow.unCoverRate3
        this.UnCoverRate7 = this.totalRow.unCoverRate7
        this.setCurrentChart(this.totalRow)
      }).catch(err => {
        this.$message({
          message: err && err.resultMsg || '获取案件覆盖率统计数据失败！',
          type: 'error'
        })
      })
    },
    setCurrentChart(currentRow) {
      // this.returnedMoneyRate.legend.length =  this.returnedCountRate.legend.length = this.
      console.log('currentRow:', currentRow)
      if (currentRow.assignCount === 0) {
        console.log(this.returnedMoneyRate.title)
        this.isNoData = true
        this.returnedMoneyRate.series[0].data = this.returnedCountRate.series[0].data = []
        this.returnedMoneyRate.title.text = this.returnedCountRate.title.text = ''
        return
      }
      this.isNoData = false
      this.returnedMoneyRate.title.text = this.sumCaseTitle
      this.returnedCountRate.title.text = this.majorCaseTitle
      // 案件总计:sumCase
      this.reportId = currentRow.reportBaseId
      this.returnedMoneyRate.legend.data = this.currentRow.dayDetails.map((m, i) => {
        return {
          name: m,
          icon: 'circle',
          textStyle: {
            fontSize: 11
          }
        }
      })
      // currentRow.monthReturnedMoneyRate = 55.66
      // currentRow.monthReturnedCountRate = 378.98
      const moneyRate = currentRow.monthReturnedMoneyRate >= 100 ? 100 : currentRow.monthReturnedMoneyRate
      const countRate = currentRow.monthReturnedCountRate >= 100 ? 100 : currentRow.monthReturnedCountRate
      const moneyRateValues = [moneyRate, 100 - moneyRate]
      const countRateValues = [countRate, 100 - countRate]
      // moneyRateValues = moneyRateValues.filter(m => m)
      // countRateValues = countRateValues.filter(m => m)

      this.isSum0 = !moneyRateValues.filter(m => m).length
      this.isMajor0 = !countRateValues.filter(m => m).length
      this.returnedMoneyRate.title.text = this.isSum0 ? '' : this.sumCaseTitle
      this.returnedCountRate.title.text = this.isMajor0 ? '' : this.majorCaseTitle
      this.returnMoneyNum = currentRow.monthReturnedMoneyRate
      this.returnCountNum = currentRow.monthReturnedCountRate

      const rateRemain = rate => {
        return {
          'name': '',
          'value': rate,
          tooltip: {
            show: false
          },
          'itemStyle': {
            'normal': {
              'label': {
                'show': false
              },
              'labelLine': {
                'show': false
              },
              'color': 'rgba(0,0,0,0)',
              'borderColor': 'rgba(0,0,0,0)',
              'borderWidth': 0
            },
            'emphasis': {
              'color': 'rgba(0,0,0,0)',
              'borderColor': 'rgba(0,0,0,0)',
              'borderWidth': 0
            }
          }
        }
      }
      this.returnedMoneyRate.series[0].data = moneyRateValues.map((m, i) => {
        if (m === 0) {
          if (moneyRate === 100) {
            return rateRemain('')
          }
          return
        }
        const pieTypeMoney = i === 0 ? {
          value: m,
          name: this.returnedMoneyRate.legend.data[i].name
        } : rateRemain(m)
        return pieTypeMoney
      })
      // 重点案件:majorCase
      this.returnedCountRate.legend.data = this.currentRow.dayDetails.map((m, i) => {
        return {
          name: m,
          icon: 'circle',
          textStyle: {
            fontSize: 11
          }
        }
      })
      // this.returnedCountRate.legend.data.shift()
      // this.returnedCountRate.series[0].data.shift()
      this.returnedCountRate.series[0].data = countRateValues.map((m, i) => {
        if (m === 0) {
          if (countRate === 100) {
            return rateRemain('')
          }
          return
        }
        const pieTypeCount = i === 0 ? {
          value: m,
          name: this.returnedCountRate.legend.data[i].name
        } : rateRemain(m)
        return pieTypeCount
      })
      // line chart data
      this.lineData = {
        date: currentRow.dayDetails.map((m, i) => {
          // console.log(`${new Date(m.date).getMonth() + 1}/${new Date(m.date).getDate()}`, '::', parseTime(m.date, '{m}/{d}'))
          // (m.date % 2 === 1) && (m.date = 1533052800000)
          // console.log('Date:', parseTime(+m.date, '{m}/{d}'))
          return {
            value: parseTime(+m.date, '{m}/{d}'),
            textStyle: {
              color: '#7A7E80'
            }
          }
        }),
        returnedCount: currentRow.dayDetails.map((m, i) => m.returnedCount),
        returnedMoney: currentRow.dayDetails.map((m, i) => m.returnedMoney)
      }
    },
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row)
    },
    downloadExcel(arg) {
      this.isDownload = true
      console.log('downloadExcel-arg:', arg, this.totalRow)
      this.handleCurrentChange(this.totalRow)
      // this.chartSnapShot()
      // this.setCurrent(this.totalRow)
    },
    chartSnapShot() {
      console.log('// chartSnapShot .... :')
      // console.log(reportBillExport)
      reportBillExport({
        reportId: this.reportId || JSON.parse(localStorage.skyTrace).homeReportId,
        monthReturnedMoneyRateChartImage: this.commonCaseTotalStream,
        monthReturnedCountRateChartImage: this.importantCaseTotalStream,
        dayDataListChartImage: this.lineCaseTotalStream
      }).then(response => {
        console.log('then --- reportBillExport:', response)
        // 处理文件流的情况
        if (!response.resultCode) {
          this.getExcelStream(response)
          return
        }
        location.href = `${route_origins}${response.uri.slice(1, response.uri.length)}`
      }).catch(err => {
        this.$message({
          message: err && err.resultMsg || '下载案件覆盖率统计数据失败！',
          type: 'error'
        })
      })
      // this.JsonToExcel()
      // open(`/report/cover/export?reportId=${this.reportId}`)
      this.handleCurrentChange(this.currentRow)
    },
    getExcelStream(raw) {
      getExcelHeaderArray(raw, data => {
        console.log('raw-data:', data)
        const _file = new FileReader(data)
        const _blob = new Blob([_file])
        _blob.createObjectURL(this.filename + parseTime(Date.now(), '{y}{m}{d}{h}{i}') + '.xlsx')
      })
    },
    JsonToExcel() {
      console.log('export_json_to_excel:')
      this.downloadLoading = true
      Export2Excel.then(excel => {
        this.roleModel = ['操作员', '小组', '部门'][localStorage.skyTrace && JSON.parse(localStorage.skyTrace).scope || 0]
        console.log('this.roleModel:', this.roleModel)
        const tHeader = [this.roleModel, '组织', '分配案件数量', '案件触达率占比', '未触达率件数', '案件触达1次数量']
        const filterVal = ['unitName', 'orgName', 'assignCount', 'coverRate', 'count0', 'count1']
        const list = this.tableData.map((m, i) => {
          return {
            unitName: m.unitName || '---',
            // orgName: `${m.deptName || '---'}/${m.teamName || '---'}`,
            orgName: m.aggrName || '---',
            assignCount: m.assignCount || '---',
            coverRate: `${m.coverRate || '---'}%`,
            count0: m.commonCase.count0 || '---',
            count1: m.commonCase.count1 || '---'
          }
        })
        const data = this.formatJson(filterVal, list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: this.filename + parseTime(Date.now(), '{y}{m}{d}{h}{i}'),
          autoWidth: this.autoWidth
        })
        this.downloadLoading = false
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'timestamp') {
          return parseTime(v[j])
        } else {
          return v[j]
        }
      }))
    },
    handleCurrentChange(curRow) {
      console.log('handleCurrentChange:', curRow)
      // this.org = `${curRow.deptName || '---'}/${curRow.teamName || '---'}`
      this.org = curRow.aggrName || '---'
      this.genDate = curRow.statisticDate || '---'
      this.UnCoverRate3 = curRow.unCoverRate3 || '---'
      this.UnCoverRate7 = curRow.unCoverRate7 || '---'
      if (!this.isDownload) {
        this.currentRow = curRow
      } else {
        const _canvas = document.querySelectorAll('canvas')
        this.commonCaseTotalStream = _canvas[0]
        this.importantCaseTotalStream = _canvas[1]
        this.lineCaseTotalStream = _canvas[2]
        setTimeout(img => {
          // console.log('this.commonCaseTotalStream:', this.commonCaseTotalStream.toDataURL())
          // console.log('this.importantCaseTotalStream:', this.importantCaseTotalStream.toDataURL())
          this.commonCaseTotalStream = this.commonCaseTotalStream.toDataURL()
          this.importantCaseTotalStream = this.importantCaseTotalStream.toDataURL()
          this.lineCaseTotalStream = this.lineCaseTotalStream.toDataURL()
          this.chartSnapShot()
        }, 1000)
      }
      this.isDownload = false
      this.setCurrentChart(curRow)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.bill-payment{
	.sidebar-t{
		background: #01011B;
		color: white;
		font-size: 16px;
		font-weight: bolder;
		text-align: center;
		padding: 21px 0;
	}
	.r-cont{
		position: relative;
		.m-title{
			color: #4c4c4c;
			font-size: 20px;
			font-weight: bolder;
			text-align: center;
			margin-bottom: 18px;
			.back-report-view{
				background: black;
			    color: white;
			    font-size: 14px;
			    font-weight: bold;
			    padding: 3px 2px 2px 2px;
			    float: left;
			    cursor: pointer;
			}
		}
		padding: 0 10px;
		.r-top{
			.l{
				font-size: 18px;
				color: #5B5D5F;
			}
			.r{
				float: right;
				font-size: 14px;
				color: #5B5D5F;
				em{
					font-style: normal;
					margin-left: 16px;
				}
			}
		}
		.title{
			font-size: 18px;
			color: #5B5D5F;
			margin: 30px 0 0 0;
			.download{
				float: right;
				border:none;
				background: #D8D8D8;
				border-radius: 4px;
				font-family: 'MicrosoftYaHeiUI';
				font-size: 14px;
				color: #5B5D5F;
				letter-spacing: 0.75px;
				margin: -12px 0 12px 0;
			    padding-left: 10px;
			    padding-right: 11px;
			}
		}
		.chart{
			@keyframes nodata_anmi {
			    0%   { opacity: 0; }
			    // 80%   { opacity: 0; }
			    100%   { opacity: .5; }
			}
			margin: 9px 0 0px 0;
			&.nodata{
				.area{
					position: relative;
					&:after{
						content: '';
						position: absolute;
						left: -10px;
						right: 0;
						top: 0;
						bottom: 0;
						background-image: url(../../assets/stat_report/report_nodata.gif);
				        background-size: 200px 200px;
				        background-repeat: no-repeat;
				        background-position: center center;
						opacity: .5;
						transition: ease .5s opacity;
	                    animation: nodata_anmi .5s linear 1;
					}
				}
			}
			.el-col{
				.area{
					position: relative;
					&.sum, &.major{
						&:after{
							content: '';
							position: absolute;
							left: -10px;
							right: 0;
							top: 0;
							bottom: 0;
							background-image: url(../../assets/stat_report/report_nodata.gif);
					        background-size: 200px 200px;
					        background-repeat: no-repeat;
					        background-position: center center;
							opacity: .5;
							transition: ease .5s opacity;
		                    animation: nodata_anmi .5s linear 1;
						}
					}
					em{
						display: none;
						font-size: 26px;
					    font-style: normal;
					    font-weight: bolder;
					    position: absolute;
					    z-index: 10;
					    left: 46%;
					    top: 70px;
					    color: #78B7E7;
					    transform: translateX(-50%);
					    &.sec{
					    	top: 270px;
					    	color: #BF67AC;
					    }
					}
					// margin: 0 0px 0 0;
					// padding: 10px 0 0 0;
					// background: white;
					// height: 549px;
					// i {
					// 	content: '';
					// 	width: 10px;
					//     height: 19px;
					//     background: white;
					//     position: absolute;
					//     top: 25px;
					//     z-index: 999;
					// }
				}
				&:last-child{
					.area {
						height: 395px;
    					width: 749px;
						margin:0 0 0 -15px;
						background: white;
						i{
						    font-family: 'MicrosoftYaHeiUI';
						    font-size: 14px;
						    color: #4C4C4C;
						    font-style: normal;
						    top: 20px;
						    left: 50%;
						    position: absolute;
						    transform: translateX(-50%);
						}
						.line-payment{
							left: 24px;
							top:40px;
						}
					}
				}
			}
		}
		.unreach-percent{
			margin: 12px 0 38px 0;
			.el-col{
				.per{
					background: white;
					padding: 9px 0;
					position: relative;
					font-size: 14px;
					color: #232323;
					border-radius: 4px;
					padding-left: 30px;
					// margin: 0 10px 0 0;
					&:after{
						content: '';
						position: absolute;
						top:0;
						right: 0;
						border: 10px solid #0096E0;
						border-left: 10px solid transparent;
					    border-bottom: 10px solid transparent;
					    border-top-right-radius: 4px;
					}
				}
				&:last-child{
					.per { margin:0 0 0 10px; }
				}
			}
		}
		.table-detail{
			margin: 12px 0 0px 0;
			:after{
				content: '';
				position: absolute;
				height: 20px;
				bottom: 0;
				left: 0;
				right: 0;
				// background: black;
			}
		}
		.bottom-mask1{
			position: absolute;
		    left: 0;
		    right: 0;
		    bottom: -8px;
		    height: 20px;
		    background: #f0f3f5;
		}
	}
}
// .fix-padding-bottom{ padding-bottom: 0px !important; }
</style>
